<template>
    <div class="common-problem-wrapper">
        <div class="problem-list">
            <div class="problem-item" @click="toProblemDetails">
              <div class="problem-icon">
                <img src="/static/image/center/account_problem.png" alt="">
              </div>
              <div class="problem-desc">
                <div class="title">账号问题</div>
                <div class="title-des">登录、绑定、密码</div>
              </div>
            </div>
            <div class="problem-item">
              <div class="problem-icon">
                <img src="/static/image/center/recharge.png" alt="">
              </div>
              <div class="problem-desc">
                <div class="title">充值中心</div>
                <div class="title-des">充值、余额、使用</div>
              </div>
            </div>
            <div class="problem-item">
              <div class="problem-icon">
                <img src="/static/image/center/buy.png" alt="">
              </div>
              <div class="problem-desc">
                <div class="title">购买问题</div>
                <div class="title-des">内容商品同步</div>
              </div>
            </div>
            <div class="problem-item">
              <div class="problem-icon">
                <img src="/static/image/center/account_problem.png" alt="">
              </div>
              <div class="problem-desc">
                <div class="title">页面问题</div>
                <div class="title-des">白页、缓慢、异常</div>
              </div>
            </div>
            <div class="problem-item">
              <div class="problem-icon">
                <img src="/static/image/center/music.png" alt="">
              </div>
              <div class="problem-desc">
                <div class="title">音频问题</div>
                <div class="title-des">设置、下载、顺序</div>
              </div>
            </div>
            <div class="problem-item">
              <div class="problem-icon">
                <img src="/static/image/center/suggest.png" alt="">
              </div>
              <div class="problem-desc">
                <div class="title">提出建议</div>
                <div class="title-des">欢迎提出宝贵建议</div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "commonProblem",
    data () {
      return {
      }
    },
    methods:{
      toProblemDetails () {
        this.$router.push({path:'/pages/problem/problemDetails'})
      }
    }
  };
</script>

<style scoped lang="less">
  .problem-list {
    box-sizing: border-box;
    overflow:hidden;
    box-sizing:border-box;
    background-color:#fff;
    padding:30rpx 20rpx 0rpx 20rpx;

  }
  .problem-item {
    box-sizing:border-box;
    padding:15px 28px;
    width:355rpx;
    float:left;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
    .border-bottom();
  }
  .problem-list .problem-item:nth-last-child(1){
    border-bottom:none;
  }
  .problem-list .problem-item:nth-last-child(2){
    border-bottom:none;
  }
  .problem-item:nth-child(odd) {
    border-right: 1px solid #EDEDED;
  }
  .problem-icon {
    width:40rpx;
    height:33rpx;
    & > img {
      width:40rpx;
      height:33rpx;
    }
  }
  .problem-desc {
    box-sizing: border-box;
    padding:20rpx;
    width:230rpx;
  }
  .title {
    width:230rpx;
    color:#333;
    font-size:28rpx;
    font-weight:bold;
    .no-wrap()
  }
  .title-des {
    color:#B3B4B5;
    font-size:24rpx;
    font-weight:400;
    .no-wrap()
  }
  .border-bottom() {
    border-bottom:1px solid #EDEDED;
  }
  .no-wrap() {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
